import moment from 'moment';
import React, { PureComponent } from 'react';
import { Form, Input, Select, Modal, DatePicker,Row,Col  } from 'antd';
import SimModel from "./simModel";
const FormItem = Form.Item;
const Option = Select.Option;
class CustomizedForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      simVisible:false,
      simValue:{}
    }
  }
  componentWillReceiveProps(nextProps){
    if (!nextProps.modalVisible) return
    if (!Object.keys(nextProps.modalValues).length) return
    this.setState({
      simValue: {
        iccid: nextProps.modalValues.iccid,
        simCardId: nextProps.modalValues.simCardId
      }
    })
  }
  okHandle = () => {
    const { form, handleSubmit, modalValues } = this.props;
    const { simValue} = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if (Object.keys(modalValues).length) {
        // 修改
        fieldsValue.id = modalValues.id;
      }
      fieldsValue.productTime = fieldsValue['productTime'].format('YYYY-MM-DD HH:mm:ss')
      form.resetFields();
      const data = {
        ...fieldsValue,
        ...simValue
      }
      this.setState({
        simValue: {}
      })
      console.log(data)
      handleSubmit(data);
    });
  };
  cancelHandle = ()=>{
    const { handleModalVisible } = this.props;
    this.setState({
      simValue: {}
    })
    handleModalVisible()
  }
  handleClick=()=>{
    this.setState({
      simVisible:true
    })
  }
  handleOk = (data) => {
    const {form} =this.props
    if(data.length) {
      const value = {
        iccid: data[0].simNo,
        simCardId: data[0].id
      }
      this.setState({
        simVisible: false,
        simValue: value,
      });
      form.setFieldsValue({
        iccid: value.iccid
      })
    }else{
      this.setState({
        simVisible: false
      });
    }
  }
  handleCancel = () => {
    this.setState({
      simVisible: false,
    });
  }
  render() {
    const { modalVisible, modalValues, form } = this.props;
    const {simValue} = this.state
    const handleFun = {
      handleOk:this.handleOk,
      handleCancel:this.handleCancel
    }
    return (
      <Modal
        destroyOnClose //关闭时销毁 Modal 里的子元素
        title={Object.keys(modalValues).length ? '修改设备' : '添加设备'}
        visible={modalVisible}
        onOk={this.okHandle}
        width={900}
        onCancel={this.cancelHandle}
      >
        <Row>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设备编号">
              {form.getFieldDecorator('deviceId', {
                rules: [{ required: true, message: '请输入设备编号' }],
                initialValue: modalValues.deviceId || '',
              })(<Input placeholder="请输入" autoComplete="off" />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="设备类型">
              {form.getFieldDecorator('deviceType', {
                rules: [{ required: true, message: '请输入设备类型	' }],
                initialValue: modalValues.deviceType || '',
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="sim卡号">
              {form.getFieldDecorator('iccid', {
                rules: [{ required: true, message: '请输入sim卡号	' }],
                initialValue: modalValues.iccid || '',
              })(<Input placeholder="请输入" autoComplete="off" onFocus={this.handleClick} />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="生产时间">
              {form.getFieldDecorator('productTime', {
                rules: [{ required: true, message: '请输入生产时间' }],
                initialValue: Object.keys(modalValues).length ? moment(modalValues.productTime, 'YYYY-MM-DD HH:mm:ss'):null
              })(<DatePicker
                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请输入"
                style={{ width: '100%' }}
              />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="厂家">
              {form.getFieldDecorator('producer', {
                rules: [{ required: true, message: '请输入厂家	' }],
                initialValue: modalValues.producer || '',
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="硬件版本号">
              {form.getFieldDecorator('hardwareVersion', {
                rules: [{ required: true, message: '请输入硬件版本号' }],
                initialValue: modalValues.hardwareVersion || '',
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="软件版本号">
              {form.getFieldDecorator('softwareVersion', {
                rules: [{ required: true, message: '请输入软件版本号' }],
                initialValue: modalValues.softwareVersion || '',
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="安装状态">
              {form.getFieldDecorator('install', {
                rules: [{ required: true }],
                initialValue: Object.keys(modalValues).length ? modalValues.install : 0,
              })(
                <Select style={{ width: '100%' }}>
                  <Option value={0}>未安装</Option>
                  <Option value={1}>已安装</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="启用状态">
              {form.getFieldDecorator('status', {
                rules: [{ required: true }],
                initialValue: Object.keys(modalValues).length ? modalValues.status : 0,
              })(
                <Select style={{ width: '100%' }}>
                  <Option value={0}>未启用</Option>
                  <Option value={1}>已启用</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注信息">
              {form.getFieldDecorator('remark', {
                rules: [{ required: true, message: '请输入备注信息' }],
                initialValue: modalValues.remark || '',
              })(<Input placeholder="请输入" />)}
            </FormItem>
          </Col>
        </Row>
        {
          this.state.simVisible ?
            <SimModel visible={this.state.simVisible} {...handleFun}/>
          :null
        }
      </Modal>
    );
  }
}
const CreateForm = Form.create()(CustomizedForm);

export default CreateForm;
